<!--
 * @Author: 白印潇 bai_yinxiao@163.com
 * @Date: 2023-03-08 16:32:10
 * @LastEditors: 白印潇 bai_yinxiao@163.com
 * @LastEditTime: 2023-03-28 16:15:21
 * @FilePath: /shortRent-ui/src/views/risk/credit/add.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <CustomContent>
      <template v-slot:body>
        <div>
          <el-form :model="formData" ref="form" :rules="rules" label-width="80px" :inline="false" size="normal">
            <!-- 客户信息 -->
            <div>
              <el-row :gutter="15">
                <el-col :span="24">
                  <MmvTitle title="客户信息"></MmvTitle>
                </el-col>

                <el-col :span="24" v-if="type == 0">
                  <el-form-item label="选择客户" required>
                    <div style="display: inline-block" @click="showCustomer = true">
                      <el-input :value="customerName" style="width: 220px; margin-right: 15px" placeholder="请选择客户"
                        readonly>
                        <el-button icon="el-icon-search" slot="append" @click="showCustomer = true"></el-button>
                      </el-input>
                    </div>
                  </el-form-item>
                </el-col>
                <!-- 客户信息 -->
                <template v-if="customerInfo.memberNo">
                  <!-- 个人信息 -->
                  <div v-if="customerInfo.memberType == 2">
                    <el-col :span="12">
                      <el-form-item label="客户类型:">{{
                        customerInfo.memberType == 1 ? '企业' : '个人'
                      }}
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="客户姓名:">{{
                        customerInfo.memberName || '--'
                      }}
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="联系电话:">{{
                        customerInfo.contactPhone || '--'
                      }}
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="证件号码:" label-width="100" prop="cardId">{{
                        customerInfo.cardId || '--'
                      }}
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="银行卡号:" label-width="150" prop="bankNo">
                        <el-input v-model="formData.cardNo" style="width: 220px;" placeholder="请输入银行卡号" size="normal"
                          clearable maxlength="19"></el-input>
                      </el-form-item>
                    </el-col>


                  </div>

                  <!-- 企业信息 -->
                  <div v-if="customerInfo.memberType == 1">
                    <el-col :span="12">
                      <el-form-item label="客户类型:">{{
                        customerInfo.memberType == 1 ? '企业' : '个人'
                      }}
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="企业名称:">{{
                        customerInfo.enterpriseName || '--'
                      }}
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="统一社会信用代码:" label-width="150">{{
                        customerInfo.creditCode || '--'
                      }}
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="企业联系人:" label-width="180">{{
                        customerInfo.contactMember || '--'
                      }}
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="联系电话:">{{
                        customerInfo.contactPhone || '--'
                      }}
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="证件号码:" prop="cardId" label-width="120">{{
                        customerInfo.cardId || '--'
                      }}
                      </el-form-item>
                    </el-col>
                  </div>
                </template>
              </el-row>
            </div>

            <!-- 查询内容 -->
            <div style="margin-top: 20rpx;">
              <el-row :gutter="15">
                <el-col :span="24">
                  <MmvTitle title="查询内容"></MmvTitle>
                </el-col>
                <!-- 选择征信包 -->
                <el-col v-if="formData.queryType != 0" :span="24" style="margin-left: 10px;">
                  <el-form-item prop="creditQueryRuleIdList">
                    <el-checkbox-group v-model="formData.creditQueryRuleIdList" size="medium">
                      <el-row :gutter="20">
                        <el-checkbox v-for="(item) in creditPackages" :key="item.id" border :label="item.id">
                          <el-col :span="12">
                            <div>
                              <p>
                                <span style="font-size: 18px;font-weight: bold;">{{ item.name }}</span>
                                <span style="margin-left: 30px;">{{ item.price }}元/次</span>
                              </p>
                              <p class="desc">{{ item.remark }}</p>
                            </div>
                          </el-col>
                        </el-checkbox>
                      </el-row>
                    </el-checkbox-group>
                  </el-form-item>

                </el-col>
                <el-col v-else :span="24">
                  <el-empty :image-size="50" description="请选择客户后查看"></el-empty>
                </el-col>
              </el-row>
            </div>
          </el-form>

        </div>
      </template>
      <!-- 底部提交按钮 -->
      <template v-slot:footer v-if="formData.queryType != 0">
        <div class="footer">
          <el-button type="primary" :loading="loading" @click.native="onSubmit">提交</el-button>
          <el-button type="info" plain @click.native="close">取消</el-button>
        </div>
      </template>
    </CustomContent>
    <!-- 选择客户 -->
    <el-dialog title="选择客户" width="1100px" destroy-on-close append-to-body :visible.sync="showCustomer">
      <MmvMember ref="MmvMember" v-if="showCustomer" @success="chooseCustomerSuccess"></MmvMember>
    </el-dialog>
  </div>
</template>
<script>
import CustomContent from '@/components/custom/content.vue'
import MmvTitle from '@/components/MmvUI/MmvTitle.vue'
import MmvMember from '@/views/components/selectMember.vue'
import * as creditApi from '@/api/credit/credit';
import * as memberApi from '@/api/member/member'
export default {
  name: 'creditAdd',
  components: {
    CustomContent,
    MmvTitle,
    MmvMember
  },
  data() {
    return {
      type: 0, //0:反欺诈列表查询 1:车辆监控反欺诈查询
      loading: false,
      showCustomer: false,//是否显示客户信息
      customerInfo: {},//客户信息
      allCreditPackage: [],//租户下所有的征信包
      options: [{
        value: '1',
        label: '运营商1'
      }, {
        value: '2',
        label: '运营商2'
      }, {
        value: '3',
        label: '运营商3'
      }],//运营商
      formData: {
        queryType: 0,//查询类型 1企业 2个人
        memberNo: '', //客户编号
        creditQueryRuleIdList: [],//征信查询包ID集合
        // 个人
        idCard: '',//身份证号
        name: '',//客户名称
        phone: '',//联系电话个人企业通用
        cardNo: '',//银行卡号
        // 企业
        entName: '',//企业名称
        entCode: '',//社会统一信用代码
        legalName: '',//法人名称,暂无字段
        legalIdCard: '',//法人身份证号,暂无字段
      },
      // 个人客户校验规则
      personRules: {
        name: [
          { required: true, message: '客户名称不能为空', trigger: 'blur' },
        ],
        idCard: [
          { required: true, message: '请完善身份证号', trigger: 'blur' },
          {
            pattern: /^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/,
            message: "身份证号格式不正确,请检查",
            trigger: "blur",
          },
        ],
        cardNo: [
          { required: true, message: '请完善银行卡号', trigger: 'blur' },
          {
            pattern: /^[1-9]\d{9,29}$/,
            message: "银行卡好格式不正确,请检查",
            trigger: "blur",
          },
        ],
        creditQueryRuleIdList: [
          { type: 'array', required: true, message: '请至少选择一个查询包', trigger: 'blur' }
        ]
      },
      // 企业客户校验规则
      companyRules: {
        entName: [
          { required: true, message: '企业名称不能为空', trigger: 'blur' },

        ],
        entCode: [
          { required: true, message: '请完善社会统一信用代码', trigger: 'blur' },
          {
            pattern: /^[0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}$/,
            message: "社会统一信用代码格式不正确,请检查",
            trigger: "blur",
          },
        ],
        creditQueryRuleIdList: [
          { type: 'array', required: true, message: '请至少选择一个查询包', trigger: 'blur' }
        ]
      },
    }
  },
  computed: {
    //根据客户类型匹配校验规则
    rules() {
      const memberType = this.formData.queryType;
      let rules = {};
      if (memberType == 1) {
        rules = this.companyRules;
      } else if (memberType == 2) {
        rules = this.personRules;
      }
      return rules;
    },
    customerName() {
      let customerName = '';
      const memberType = this.formData.queryType;
      if (memberType == 1) {
        customerName = this.formData.entName;
      } else if (memberType == 2) {
        customerName = this.formData.name;
      }
      return customerName;
    },
    creditPackages() {
      //通过客户类型筛选征信查询包
      const memberType = this.formData.queryType;
      return this.allCreditPackage.filter((item) => {
        return item.type == memberType;
      });
    }
  },
  created() {
    this.getCreditPackage();
    this.type = this.$route.query.type;
    if (this.type == 1) {
      this.formData.memberNo = this.$route.query.memberNo;
      this.getMemberInfo();
    }
  },
  methods: {
    //获取客户信息
    getMemberInfo() {
      memberApi.getBasic(this.formData.memberNo).then((resopnse) => {
        let data = resopnse.data
        if (data.memberType == 1) {
          data.contactMember = data.memberName
          data.memberName = data.enterpriseName
        }
        this.customerInfo = data;
        this.configFormData();
      })

    },
    // 获取租户配置的征信包
    getCreditPackage() {
      creditApi.currentTenantCredit().then(res => {
        this.allCreditPackage = res.data;
      })
    },

    // 选择客户的监听事件
    chooseCustomerSuccess(customer) {
      this.customerInfo = customer;
      this.configFormData();
      this.showCustomer = false;
    },
    // 配置formdata的客户信息
    configFormData() {
      this.formData.queryType = this.customerInfo.memberType;
      this.formData.memberNo = this.customerInfo.memberNo;
      this.formData.phone = this.customerInfo.contactPhone;
      if (this.customerInfo.memberType == 1) {//企业
        this.formData.entName = this.customerInfo.enterpriseName;
        this.formData.entCode = this.customerInfo.creditCode;
      } else {//个人
        this.formData.queryType = this.customerInfo.memberType;
        this.formData.memberNo = this.customerInfo.memberNo;
        this.formData.idCard = this.customerInfo.cardId;
        this.formData.name = this.customerInfo.memberName;
      }
    },

    // 提交
    onSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$confirm('确认提交查询反欺诈工单吗?', '提示', {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
          }).then(() => {
            creditApi.addCreditWork(this.formData).then(res => {
              if (res.code == 200) {
                this.$router.back();
                this.$message({
                  type: 'success',
                  message: '提交征信查询工单成功'
                });
              }
            })
          })
        }
      });
    },
    // 返回
    close() {
      this.$router.back()
    }
  },
}
</script>
<style scoped>
.creditContent {
  background-color: #fff;
}

/deep/ .el-checkbox.is-bordered.el-checkbox--medium {
  height: 150px;
  width: 300px;
  margin-bottom: 15px;
}

/deep/ .el-checkbox.is-bordered.el-checkbox--medium .el-checkbox__inner {
  position: absolute;
  top: -120px;

}

/deep/.el-checkbox.is-bordered+.el-checkbox.is-bordered {
  margin-left: 0px;
}

.desc {
  white-space: pre-wrap;
  /* word-wrap: break-all; */
  width: 250px;
  height: 80px;
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}
</style>
